<template>
    <div>
        <el-row>
            <!-- <el-col :span="2"><div style="line-height: 60px;">
                <el-button size="small" @click="backToHome" type="primary">返回主页面</el-button>
            </div></el-col> -->
            <el-col :span="24"><div>
                <h3>模块管理</h3>
            </div></el-col>
        </el-row>
        
        <el-divider></el-divider>
        <el-row>
            <el-col :span="2"><div style="line-height: 30px;">
                模块名称：
            </div></el-col>
            <el-col :span="8"><div>
                <el-input size="small" v-model="name"></el-input>
            </div></el-col>
            <el-col :span="2"><div>
                <el-button size="small" @click="getModuleList" type="primary">查询</el-button>
            </div></el-col>
            <el-col :span="1" :offset="10"><div>
                <el-button size="small" type="primary" @click="openModule">新增模块</el-button>
            </div></el-col>
        </el-row>
        <div style="height: 30px;"></div>
        <el-table
            :data="moduleList"
            stripe
            style="width: 100%">
            <el-table-column
            prop="name"
            label="模块名称">
            </el-table-column>
            <el-table-column
            label="操作">
            <template slot-scope="scope">
                <el-popconfirm title="确认删除该模块吗？" @confirm="deleteModule(scope.row.id)">
                    <el-button type="danger" slot="reference" size="small">删除</el-button>
                </el-popconfirm>
            </template>
            </el-table-column>
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="changeCurrent"></el-pagination>
        <Login :dialog-visible="loginShow" @closeLoginDialog="closeLoginDialog" @reloadData="reloadData"></Login>
        <el-dialog title="新增模块" :visible.sync="dialogVisible" width="30%">
            <span>
                <el-form ref="moduleform" :model="moduleForm" :rules="rules" label-width="80px" >
                    <el-form-item label="模块名称" prop="name">
                        <el-input v-model="moduleForm.name"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button style="width: 100%;background-color: #BDCEFC;color: white;border-radius: 20px;border: none;" type="primary" @click="addModule">添加</el-button>
                    </el-form-item>
                </el-form>
            </span>
        </el-dialog>
    </div>
</template>
<script>
import { listModule,addModule,deleteModule } from '@/api/api'
import Login from '@/components/Login.vue'
export default {
    components:{
        Login   
    },
    data(){
        return {
            imgUrl: '',
            dialogVisible: false,
            loginShow: false,
            current: 1,
            size: 10,
            pages: 0,
            total: 0,
            phone: '',
            name: '',
            moduleList: [],
            moduleForm: {
                name: ''
            },
            rules: {
                name: [
                    { required: true, message: '请输入模块名称', trigger: 'blur' }
                ]
            }
        }
    },
    mounted(){
        const that = this
        that.imgUrl = that.$store.state.imgUrl
        if(localStorage.getItem('userType') !== null && localStorage.getItem('userType')  === 'admin'){
            this.getModuleList()
        }else{
            this.loginShow = true
        }
    },
    methods:{
        reloadData:function(){
            this.getModuleList()
        },
        getModuleList:function(){
            listModule({
                current: this.current,
                size: this.size,
                name: this.name
            }).then(res => {
                this.total = res.data.total
                this.moduleList = res.data.records
            })
        },
        changeCurrent:function(current){
            this.current = current
            this.getModuleList()
        },
        closeLoginDialog:function(){
            const that = this
            that.loginShow = false
        },
        backToHome:function(){
            this.$router.push('/')
        },
        deleteModule:function(id){
            deleteModule(id).then(res => {
                this.getModuleList()
            })
        },
        addModule:function(){
            const that = this
            this.$refs['moduleform'].validate((valid) => {
                if (valid) {
                    addModule(that.moduleForm).then(res => {
                        this.$message({
                            message: res.data,
                            type: res.status === 200 ? 'success':'warning'
                        })
                        if(res.status === 200){
                            this.dialogVisible = false
                            this.getModuleList()
                        }
                    })
                } else {
                    return false;
                }
            });
        },
        openModule:function(){
            this.dialogVisible = true
        }
    }
}
</script>
<style scoped>
</style>